<template>
	<view class="content">
		<!--顶部标签-->
		<view class="content_1">
			<view class="tab_view">
				<view class="tab_box" @click="changeTab(1)">
					<view :class="choosetab == 1 ? 'tab_name' : 'tab_name_none'">类型</view>
					<image class="tab_icon" src="../../../static/mine/downjiantou.svg"></image>
				</view>
				<view class="tab_box" @click="changeTab(2)">
					<view :class="choosetab == 2 ? 'tab_name' : 'tab_name_none'">年份</view>
					<image class="tab_icon" src="../../../static/mine/downjiantou.svg"></image>
				</view>
				<view class="tab_box" @click="changeTab(3)">
					<view :class="choosetab == 3 ? 'tab_name' : 'tab_name_none'">月份</view>
					<image class="tab_icon" src="../../../static/mine/downjiantou.svg"></image>
				</view>
			</view>
		</view>
		<!--账单详细-->
		<view class="content_2">
			<block v-for="(item_order, index_order) in orderList" :key='index_order'>
				<view class="order_view">
					<view class="line_2"></view>
					<view class="order_box">
						<view class="detail_name">交易金额</view>
						<view class="detail" style="color: #FFC26D;">{{item_order.pay_money}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">交易类型</view>
						<view class="detail">{{item_order.bill_type}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">交易时间</view>
						<view class="detail">{{item_order.paytime}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">流水单号</view>
						<view class="detail">{{item_order.order_sn}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">备注</view>
						<view class="detail">无</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		Request
	} from '../../../utils/request.js';
	const app = getApp();
	let seach_number = 3
	let page = 3
	export default {
		data() {
			return {
				choosetab: '1',
				orderList: [],
			}
		},
		methods: {
			//tab切换
			changeTab: function(id) {
				this.choosetab = id
			},
			//上拉加载(筛选前)
			loadMore: function() {
				new Request('Get_Bill/GetLandBoosBill').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							seach_number: seach_number,
							page: page
						}
					},
					(res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '没有更多数据了',
								position: 'center',
								icon: 'none'
							})
						} else {
							page += seach_number
							this.orderList = this.orderList.concat(res.data.data)
							console.log(this.orderList)
						}
					}
				)
			},
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad() {
			//获取账单列表
			seach_number = 3
			page = 3
			new Request('Get_Bill/GetLandBoosBill').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						seach_number: seach_number,
						page: 0
					}
				},
				(res) => {
					if (res.data.code == '1') {
						this.orderList = res.data.data
					} else {
						uni.showToast({
							title: '没有账单',
							icon: 'none',
							position: 'center'
						})
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		顶部标签样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding-left: 40upx;
	}

	.tab_view {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.tab_box {
		height: 40upx;
		display: flex;
		align-items: center;
		margin-right: 80upx;
	}

	.tab_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #B3E9DC;
		margin-right: 10upx;
	}

	.tab_name_none {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
		margin-right: 10upx;
	}

	.tab_icon {
		height: 28upx;
		width: 28upx;
	}

	/**
	 * 账单详细样式
	 */

	.order_view {
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
	}

	.line_2 {
		height: 20upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}

	.order_box {
		height: 80upx;
		padding: 0upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.detail_name {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}
</style>
